<script setup>
import { ref, computed } from 'vue'
import { useTaskStore } from '../../stores/taskStore'
import { useCategoryStore } from '../../stores/categoryStore'

const props = defineProps({
  task: {
    type: Object,
    required: true
  }
})

const taskStore = useTaskStore()
const categoryStore = useCategoryStore()

// 计算属性：获取任务所属的分类
const category = computed(() => {
  return categoryStore.getCategoryById(props.task.categoryId)
})

// 计算属性：格式化到期日期
const formattedDueDate = computed(() => {
  if (!props.task.dueDate) return ''
  
  const date = new Date(props.task.dueDate)
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)
  
  const yesterday = new Date(today)
  yesterday.setDate(yesterday.getDate() - 1)
  
  // 格式化日期
  if (date.getTime() === today.getTime()) {
    return '今天'
  } else if (date.getTime() === tomorrow.getTime()) {
    return '明天'
  } else if (date.getTime() === yesterday.getTime()) {
    return '昨天'
  } else {
    // 标准日期格式化
    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  }
})

// 计算任务优先级对应的图标和颜色
const priorityInfo = computed(() => {
  switch(props.task.priority) {
    case 'high':
      return { icon: 'mdi-flag', color: 'error' }
    case 'medium':
      return { icon: 'mdi-flag', color: 'warning' }
    case 'low':
      return { icon: 'mdi-flag', color: 'success' }
    default:
      return { icon: 'mdi-flag-outline', color: 'grey' }
  }
})

// 切换任务完成状态
const toggleComplete = () => {
  taskStore.toggleTaskCompletion(props.task.id)
}

// 删除任务
const deleteTask = () => {
  taskStore.deleteTask(props.task.id)
}

// 计算是否显示截止日期
const showDueDate = computed(() => {
  return !!props.task.dueDate
})

// 格式化提醒时间
const formattedReminderTime = computed(() => {
  if (!props.task.reminder) return ''
  
  const date = new Date(props.task.reminder)
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  
  return `${hours}:${minutes}`
})
</script>

<template>
  <v-card 
    :class="['task-item mb-2', {'completed': task.completed}]"
    variant="outlined"
    :ripple="false"
  >
    <div class="d-flex align-center px-4 py-2">
      <!-- 完成状态复选框 -->
      <v-checkbox
        v-model="task.completed"
        @click="toggleComplete"
        hide-details
        :color="category ? category.color : 'primary'"
        class="flex-grow-0 mr-2"
      ></v-checkbox>
      
      <!-- 任务内容 -->
      <div class="flex-grow-1">
        <div class="title-row d-flex align-center">
          <span :class="{'text-decoration-line-through': task.completed}" class="text-subtitle-1 font-weight-medium">
            {{ task.title }}
          </span>
          
          <!-- 标签：优先级 -->
          <v-icon 
            :color="priorityInfo.color" 
            size="small" 
            class="ml-2" 
            v-if="props.task.priority"
          >
            {{ priorityInfo.icon }}
          </v-icon>
        </div>
        
        <!-- 任务描述 -->
        <div 
          v-if="task.description" 
          class="text-caption text-medium-emphasis mt-1"
          :class="{'text-decoration-line-through': task.completed}"
        >
          {{ task.description }}
        </div>
        
        <!-- 元数据：日期、时间等 -->
        <div class="d-flex align-center mt-1" v-if="showDueDate || task.reminder">
          <!-- 截止日期 -->
          <div class="d-flex align-center mr-3" v-if="showDueDate">
            <v-icon size="x-small" color="grey-darken-1" class="mr-1">mdi-calendar</v-icon>
            <span class="text-caption text-grey-darken-1">{{ formattedDueDate }}</span>
          </div>
          
          <!-- 提醒时间 -->
          <div class="d-flex align-center" v-if="task.reminder">
            <v-icon size="x-small" color="grey-darken-1" class="mr-1">mdi-clock-outline</v-icon>
            <span class="text-caption text-grey-darken-1">{{ formattedReminderTime }}</span>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="actions">
        <v-menu location="bottom">
          <template v-slot:activator="{ props }">
            <v-btn
              icon
              variant="text"
              size="small"
              v-bind="props"
            >
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </template>
          <v-list density="compact">
            <v-list-item @click="$emit('edit')">
              <template v-slot:prepend>
                <v-icon size="small">mdi-pencil</v-icon>
              </template>
              <v-list-item-title>编辑</v-list-item-title>
            </v-list-item>
            
            <v-list-item @click="deleteTask">
              <template v-slot:prepend>
                <v-icon size="small">mdi-delete</v-icon>
              </template>
              <v-list-item-title>删除</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>
    </div>
  </v-card>
</template>

<style scoped>
.task-item {
  transition: all 0.2s ease;
}

.task-item.completed {
  opacity: 0.7;
}

.task-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.actions {
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
}

.task-item:hover .actions {
  visibility: visible;
  opacity: 1;
}
</style> 